import React from 'react';
import {
    Tabs
} from 'antd';
import './App.less';

const TabPane = Tabs.TabPane;
import DispatcherConstructor from '../../../common/Dispatcher.js';
import LiveList from './Views/LiveList.jsx';

var Dispatcher = new DispatcherConstructor();
import Action from './Action.js';
import Config from './Config.js';

const App = React.createClass({
    getInitialState: function(){
        return {
            loading: true,
            currentKey: '0',
            currentGame: 'all',
            platforms: [
                { key: '0', name: '斗鱼Tv', value: 'douyu' },
                { key: '1', name: '熊猫Tv', value: 'xiongmao' },
                { key: '2', name: '战旗Tv', value: 'zhanqi' },
            ],
            lives: [],
            currentPage: 1
        };
    },
    componentWillMount: function() {
		Dispatcher.init(Action, Config);
		Dispatcher.sub(this.onEvent);
	},
	onEvent: function(actionName, dataFromChild, callback) {
		var newStateHandler = function(newState) {
			this.setState(newState);
		}.bind(this)
		var currentState = this.state;

		Dispatcher.handler(actionName, dataFromChild, currentState, newStateHandler, callback);
	},
    componentWillUnmount(){
        Dispatcher.unsub(this.onEvent);
    },
    handleChangeKey: function(key){
        Dispatcher.pub("changeKey", {
            key
        });
    },
    renderTabPane: function(platform){
        return (
            <TabPane tab={platform.name} key={platform.key}>
                <LiveList {...this.state} />
            </TabPane>
        );
    },
    render: function(){
        return (
            <div>
                <Tabs activeKey={this.state.currentKey} onChange={this.handleChangeKey}>
                    {
                        this.state.platforms.map(this.renderTabPane)
                    }
                </Tabs>
            </div>
        );
    },
})

export default App;
